<!-- 体检工作量统计页面  wk-2022-01-4 -->
<script setup lang='ts' name="WorkloadStatistics">
import {onActivated, ref, reactive} from 'vue'
import { ElMessage} from 'element-plus'
import {HeaderData} from '@/components/dTable/dTable'
import {OperButton, SearchButton, SearchFromItem, SearchFromJustify} from '@/components/dTable/dHeader'
import {SeleteData} from '@/api/config'
import pageContainer from '@/components/pageContainer.vue'
import dTablePromote from '@/components/dTable/dTablePromote.vue'
import {getWorkloadList, WorkloadInfor, SearchWorkloadFromData, getExportDataList, getDoctorList} from '@/api/statisticalAnalysis/workloadStatistics'
import {getTeamListAll} from '@/api/publicHealthExamination/communitySettings'
import {getYearMonthDay, getMonthStartDate, getYearMonthDayStr, downFile} from '@/util/common'
//待完成：导出Excel

//当前页面 表格数据 定义
const tableData = ref<Array<object>>([])

//下拉数据定义 社区 医生
const selectTeamLsit = ref<Array<SeleteData>>([])

const selectDoctorLsit = ref<Array<SeleteData>>([])

// 表头宽度
const minWidth = {2:'70', 3:'80', 4:'120', 5:'110', 6:'120', 7:'140', 8:'160', 9:'170', 10:'180'}

//显示加载状态
const showLoading = ref(false)

//表格头部数据定义
const tableHeaderData = ref<Array<HeaderData>>([])

//搜索项数据定义
const searchFromItems = ref<Array<SearchFromItem>>([
  {label: '统计日期', placeholder: ['开始日期', '结束日期'], type: 'antdRange', prop: 'rrrr',
    showTime: false, changeSubmit: true, dateFormat: 'YYYY-MM-DD', style: {width: '320px'}
  },
  {label:'社区', placeholder:'请选择社区', prop:'teamId', type:'selete', changeSubmit:true, seleteData:selectTeamLsit.value},
  {label:'体检医生', placeholder:'请选择体检医生', prop:'dutyDoctorId', type:'selete', changeSubmit:true, seleteData:selectDoctorLsit.value}
])

// 搜索数据
const searchFromData = reactive<SearchWorkloadFromData>({rrrr:['', ''], startDate:null, endDate:null, teamId:null, dutyDoctorId:null})

//表头按钮
const operButtons = ref<Array<OperButton>>([
  {label:'导出Excel', type:'noraml', iconConfig:{icon:'common-import', type:'custom'}, code:'export'}
])


//表单靠左还是靠右
const searchFromJustify = ref<SearchFromJustify>('flexStart')

//搜索按钮配置
const searchButtons = ref<Array<SearchButton>>([
  {type:'search'},
  {type:'clear'}
])
// 设置表头
const setHeaderList = (data:Array<string>) => {
  tableHeaderData.value.length = 0
  data.map((item) => {
    const header:HeaderData = {prop:'', label:'', columnType:'text', align:'left', 'min-width':'180'}
    header.prop = item
    header.label = item
    header['min-width'] = minWidth[item.length] ?? '200'
    tableHeaderData.value.push(header)
  })
}
//后端数据拼接字段事件
const setTableData = (data:WorkloadInfor) => {
  data = data ? data : {titles:[], rows:[]}
  setHeaderList(data.titles)
  const dataArr:Array<object> = []
  tableData.value.length = 0
  data.rows.forEach((item, index) => {
    if (index !== data.rows.length - 1)dataArr.push(item)
  })
  tableData.value = dataArr
}


//搜索数据事件
const searchData = () => {
  showLoading.value = true
  searchFromData.startDate = searchFromData.rrrr ? searchFromData.rrrr[0] ? searchFromData.rrrr[0] : null : null
  searchFromData.endDate = searchFromData.rrrr ? searchFromData.rrrr[1] ? searchFromData.rrrr[1] : null : null
  getWorkloadList({...searchFromData, rrrr:null}).then((res) => {
    showLoading.value = false
    const {data} = res.data
    setTableData(data)
  }).catch((error) => {
    showLoading.value = false
    console.warn(error)
  })
}

const setSearchTime = () => {
  const currentDate = getYearMonthDay(Date.now())
  searchFromData.startDate = currentDate[0] + '-' + getMonthStartDate((currentDate[1] + '').padStart(2, '0'))
  searchFromData.endDate = getYearMonthDayStr(Date.now()) + ' 23:59:59'
  searchFromData.rrrr = [searchFromData.startDate, searchFromData.endDate]
}

//搜索事件
const onSubmit = () => {
  searchData()
}

//清除搜索栏数据事件
const clearForm = () => {
  searchData()
}

//清空搜索表单事件
const onFormClear = () => {
  setSearchTime()
  clearForm()
}

//操作按钮事件
const onOperation = (name:string) => {
  if (name === 'export') {
    if (tableData.value.length === 0) {
      ElMessage.warning('当前无数据可导出')
      return false
    }
    showLoading.value = true
    searchFromData.startDate = searchFromData.rrrr ? searchFromData.rrrr[0] ? searchFromData.rrrr[0] : null : null
    searchFromData.endDate = searchFromData.rrrr ? searchFromData.rrrr[1] ? searchFromData.rrrr[1] : null : null
    getExportDataList({...searchFromData, rrrr:null}).then((res) => {
      showLoading.value = false
      ElMessage.success('导出成功')
      downFile('体检工作量.xlsx', res.data)
    }).catch((error) => {
      showLoading.value = false
      console.warn(error)
    })
  }
}

//当前页改变事件
const onCurrentChange = () => {
  searchData()
}

//获取搜索列表数据
const getSearchListData = () => {
  // 获取社区下拉
  selectTeamLsit.value.length = 0
  getTeamListAll().then((res) => {
    res.data.data?.length &&
      res.data.data.forEach((item) => {
        selectTeamLsit.value.push({label: item.name, value: item.id || ''})
      })
  })
  // 获取体检医生下拉
  selectDoctorLsit.value.length = 0
  getDoctorList().then((res) => {
    const {data} = res.data
    data.length &&
      data.forEach((item) => {
        selectDoctorLsit.value.push({label: item.userName, value: item.id || ''})
      })
  })
}

//DOM即将挂载
onActivated(() => {
  getSearchListData()
  setSearchTime()
  searchData()
})
</script>

<template>
  <page-container>
    <d-table-promote
      :label-width="70"
      :show-summary="true"
      :sum-text="'合计（人次）'"
      :show-loading="showLoading"
      :oper-buttons="operButtons"
      :table-data="tableData"
      :table-header-data="tableHeaderData"
      :search-form-data="searchFromData"
      :search-form-items="searchFromItems"
      :search-from-justify="searchFromJustify"
      :search-buttons="searchButtons"
      :show-footer="false"
      @form-submit="onSubmit"
      @form-clear="onFormClear"
      @operation="onOperation"
      @current-change="onCurrentChange"
    />
  </page-container>
</template>

<style scoped>
</style>